<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view class="wrap">
			<view :class="['tool-card',{'darksss':theme=='dark'}]" v-for="(item,index) in list" :key="index">
				<u-row gutter="16">

					<u-col span="6">
						<view class="bgtxt">{{$t('bico.W341')}}</view>
					</u-col>
					

					<u-col span="6">
						<view class="bgtxt">{{item.orderNo}}</view>
					</u-col>

					<u-col span="9">
						<view class="bgtxt">{{$t('bico.W342')}}</view>
					</u-col>
					<u-col span="3">
						<!-- <view class="bgtxt">{{item.periodicName}}</view> -->
						<view class="bgtxt">{{typeStatus[item.type]}}</view>
					</u-col>

					<u-col span="9">
						<view class="bgtxt">{{$t('bico.W343')}}</view>
					</u-col>
					<u-col span="3">
						<view class="bgtxt">{{item.amount}} {{item.symbol}}</view>
					</u-col>

					<u-col span="9">
						<view class="bgtxt">{{$t('bico.W344')}}</view>
					</u-col>
					<u-col span="3">
						<view class="bgtxt">{{item.rate.toFixed(2)}}%</view>
					</u-col>

					<u-col span="9">
						<view class="bgtxt">{{$t('bico.W345')}}</view>
					</u-col>
					
					<u-col span="3">
						<view class="bgtxt">{{item.winN}} {{item.symbol}}</view>
					</u-col>

					<u-col span="9">
						<view class="bgtxt">{{$t('bico.W346')}}</view>
					</u-col>
					
					<u-col span="3">
						<view class="bgtxt">{{status[item.result]}}</view>
					</u-col>

					<u-col span="6">
						<view class="bgtxt">{{$t('bico.W347')}}</view>
					</u-col>
					

					<u-col span="6">
						<view class="bgtxt">{{item.createTime}}</view>
					</u-col>

					<u-col span="6">
						<view class="bgtxt">{{$t('bico.W348')}}</view>
					</u-col>
					

					<u-col span="6">
						<view class="bgtxt">{{item.endTime|''}}</view>
					</u-col>
				</u-row>
			</view>
			<u-line color="#5559691f"></u-line>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		finPeriodicMyOrderList
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		data() {
			return {
				list: [],
				status: {
					'1': this.$t('bico.W349'),
					'2': this.$t('bico.W350'),
					'3': this.$t('bico.W351'),
					'4': this.$t('bico.W352'),
					},

				typeStatus: {
					'1': this.$t('bico.W328'),
					'2': this.$t('bico.W329'),
					'3': this.$t('bico.W330'),
					'4': this.$t('bico.W331'),
				}
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		methods: {
			onLoad() {
				uni.setNavigationBarTitle({
					title: this.$t('bico.W353'),
				})
				this.$utils.setTheme(this.theme);
				this.getData()
			},
			getData() {
				var that = this
				that.$utils.initDataToken({
						url: finPeriodicMyOrderList,
						type: 'post',

					},
					res => {


						that.list = res.list

					}
				);
			},
			funsItemClick(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/' //资产
					})
				};
			},
		},

	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.container {

		width: 100%;
		height: 100%;

		.wrap {
			padding: 0px;
			padding-top: 2vw;
		}

		.u-row {
			margin: 0rpx 0;
		}

		.demo-layout {
			height: 80rpx;
			border-radius: 8rpx;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}

		.bgtxt {
			position: relative;
			border: 0;
			display: inline-flex;
			overflow: visible;
			line-height: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			z-index: 1;
			box-sizing: border-box;
			transition: all 0.15s;
			font-size: 14;
			height: 8vw;
			line-height: 8vw;
		}

		.kgb {
			width: 92%;
			margin: 4vw;
			margin-top: 0vw;
		}

		.tool-card {
			background-color: #ffffff;
			/* padding: 10px 0px; */
			/* margin-top: 10px; */
			border-radius: 1vw;
			width: 92%;
			margin: 4vw;
		}
		.juzon {

			text-align: right!important;
		}
		.juzonuc {

			position: relative;
			top: 0vw;
			left: 7vw;
		}
		.juzonucg {
			text-align: left;
			font-size: 14px;
			padding: 10px 0px;
			font-weight: 700;
			position: relative;
			top: -1vw;
			left: 0vw;
		}
		.juzonucom {
			border: 0.5px solid #7079ab24;
			border-radius: 8px;
			padding: 10px 4px;
		}
	}
</style>
